<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="layer.js"></script>
		<script src="layui.js"></script>
		<link rel="stylesheet" href="css/layui.css" media="all">
		<script src="dist/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
	    <br/><br/>
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-block">
					<input style="width: 300px;" type="text" name="userName" id="userName" lay-verify="userName" autocomplete="off" placeholder="请输入英文+数字用户名" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-block">
					<input style="width: 300px;" type="password" name="passWord" id="passWord" lay-verify="passWord" autocomplete="off" placeholder="请输入密码" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">再次输入密码</label>
				<div class="layui-input-block">
					<input style="width: 300px;" type="password" name="passWord" id="passWord" lay-verify="passWordAgain" autocomplete="off" placeholder="请再次输入密码" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">验证手机</label>
					<div class="layui-input-block">
						<input style="width: 300px;" type="tel" name="userTel" id="userTel" placeholder="请输入正常的手机号码" lay-verify="required|phone" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">请选择你所在的位置</label>
				<div class="layui-input-block">
					<input style="width: 300px;" type="text" name="userAdress" id="userAdress" lay-verify="title" autocomplete="off" placeholder="请输入你所在的位置" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">请选择性别</label>
				<div class="layui-input-block">
					<input type="radio" name="sex" value="男" title="男" checked="">
					<input type="radio" name="sex" value="女" title="女">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
		<script type="text/javascript">
			layui.use(['form', 'layedit', 'laydate'], function() {
				var form = layui.form,
					layer = layui.layer,
					layedit = layui.layedit,
					laydate = layui.laydate;


				//自定义验证规则
				form.verify({
					userName: function(value) {
						if(value.length < 5) {
							return '用户名至少得5个字符啊';
						}
					},
					passWord: [/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/, '密码必须6到12位'],
					content: function(value) {
						layedit.sync(editIndex);
					},
					passWordAgain: function(value) {
						if(value!=$("#passWord").val()) {
							return '两次输入的密码不一致啊';
						}
					}
				});
				form.on('submit(demo1)', function(data) {
					$.ajax({
						url : "QuestionTopServlet?op=register",
						type : "post",
						data : {
							"userName" : $('#userName').val(),
							"passWord" : $('#passWord').val(),
							"userSex" : $('#userSex').val(),
							"userTel" : $('#userTel').val(),
							"userAdress" : $('#userAdress').val()
						},
						success : function(data) {
							if (data == "false") {
								layer.msg('注册失败，请重新注册', {
									time : 3000
								});
							} else {
								layer.msg('注册成功   你已经可以登录了哦！！！ 我将会为你转到登录页面，请稍等', {
									time : 3000, //3s后自动关闭
									btn : [ '知道了' ]
								}, function() {
									location.href = "login_top.jsp"
								});
								
							}
						}
					});
					return false;
				});

			});
		</script>
	</body>

</html>